<template>
  <div class="main">
    <div class="header"><SppHeader :data="dataModel"></SppHeader></div>

    <div class="content">
      <div class="content-left">
        <div class="content-left-item first">
          <spp-left-top :data="dataModel" />
        </div>
        <div class="content-left-item">
          <spp-left-center :data="dataModel" />
        </div>
        <div class="content-left-item">
          <spp-left-bottom :title="'车 辆 信 息'" />
        </div>
      </div>
      <div class="content-middle">
        <div class="middle-top"><spp-center-top :data="dataModel" /></div>
        <div class="middle-bottom">
          <div class="middle-bottom-item first"><SppCenterBottomLeft style="width: 90%; height: 85%" /></div>
          <div class="middle-bottom-item"><spp-center-bottom-right /></div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-left-item first" ref="sppRightTopDivRef">
          <spp-right-top ref="sppRightTopRef" style="width: 100%; height: 100%" />
        </div>
        <div class="content-left-item"><spp-right-center style="width: 90%; height: 85%" /></div>
        <div class="content-left-item"><spp-right-bottom style="width: 90%; height: 85%" /></div>
      </div>
    </div>
  </div>
</template>
<script>
import SppHeader from './components/Header.vue'
import SppLeftTop from './components/LeftTop.vue'
import SppLeftCenter from './components/LeftCenter.vue'
import SppLeftBottom from './components/LeftBottom.vue'
import SppRightTop from './components/RightTop.vue'
import SppRightCenter from './components/RightCenter.vue'
import SppRightBottom from './components/RightBottom.vue'
import SppCenterBottomLeft from './components/CenterBottomLeft.vue'
import SppCenterBottomRight from './components/CenterBottomRight.vue'
import SppCenterTop from './components/CenterTop.vue'

import sppApi from '@/api/spp'

export default {
  name: 'SppIndex',
  components: {
    SppHeader,
    SppLeftTop,
    SppLeftCenter,
    SppLeftBottom,
    SppRightTop,
    SppRightCenter,
    SppRightBottom,
    SppCenterBottomLeft,
    SppCenterBottomRight,
    SppCenterTop
  },
  data() {
    return {
      lockReconnect: false,
      ws: null,
      tt: null,
      wsUrl: 'ws://10.66.152.17:8091/websocket/lygmanager',
      scale: 1,
      styleObject: {},
      dataModel: {
        M0_yxts: 0,
        HY_0_003: 0,
        '2DCS_2FT04OUT': 0,
        '1DCS_COM_J0NDA10CT150': 0,
        '1DCS_SELMW': 0,
        '2DCS_SELMW': 0,
        '1DCS_THRPRESS': 0,
        '2DCS_THRPRESS': 0,
        '1DCS_MSTMTEM': 0,
        '2DCS_MSTMTEM': 0,
        '1DCS_RHTSEL': 0,
        '2DCS_RHTSEL': 0,
        '1DCS_LAB34CT150': 0,
        '2DCS_LAB34CT150': 0,
        '1DCS_10MAG10CP101': 0,
        '2DCS_10MAG10CP101': 0
      }
    }
  },
  mounted() {
    const self = this
    this.initLoadData()
    let theNowTime = function () {
      self.initLoadData()
    }
    let speed = 1000
    setInterval(theNowTime, speed)
    this.createWebSocket()
  },
  methods: {
    onResize(divStyle) {
      this.$nextTick(() => {
        const container = this.$refs.sppRightTopDivRef
        let ww = container.offsetWidth / divStyle.width
        let wh = container.offsetHeight / divStyle.height
        this.scale = ww < wh ? ww : wh
        this.styleObject = {
          transform: `scale(${ww},${wh}) translate(${(-100 * (1 - ww)) / 2}%, ${(-100 * (1 - wh)) / 2}%)`,
          WebkitTransform: `scale(${ww},${wh}) translate(${(-100 * (1 - ww)) / 2}%, ${(-100 * (1 - wh)) / 2}%)`
        }
      })
    },
    init() {
      this.ws.onclose = function (e) {
        console.log('链接关闭' + e.code + new Date().getTime())
        // 服务器关闭  不重连
        if (e.code != 1006) {
          this.reconnect()
        }
      }
      this.ws.onerror = function () {
        console.log('发生异常了' + new Date().getTime())
      }
      this.ws.onopen = function () {
        console.log('连接成功' + new Date().getTime())
      }
      this.ws.onmessage = function (e) {
        this.dataModel = Object.assign(this.dataModel, JSON.parse(e.data))
      }
    },
    reconnect() {
      if (this.lockReconnect) {
        return
      }
      this.lockReconnect = true
      //没连接上会一直重连，设置延迟避免请求过多，  有定时任务 先取消再设置
      this.tt && clearTimeout(this.tt)
      this.tt = setTimeout(function () {
        this.createWebSocket()
        this.lockReconnect = false
      }, 2000)
    },
    createWebSocket() {
      try {
        this.ws = new WebSocket(this.wsUrl)
        this.init()
      } catch (e) {
        console.log('catch' + e)
        this.reconnect()
      }
    },
    initLoadData() {
      sppApi.getLoadCurveByRedis().then((res) => {
        this.dataModel = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.main {
  width: 99%;
  height: 99vh;
  background-image: url('@/assets/spp/bg.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
.header {
  width: 100%;
  height: 95px;
}
.content {
  display: flex;
  justify-content: space-between;
  color: #fff;
  height: calc(100% - 95px);
  .content-left {
    width: 27%;
    height: auto;
  }
  .content-left-item {
    width: 100%;
    height: 32%;
    background-image: url('@/assets/spp/u34.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: 13px;
  }
  .first {
    margin-top: 0;
  }
  .content-middle {
    width: 45.2%;
    height: auto;
    .middle-top {
      width: 100%;
      height: 64.5%;
      margin-top: 10px;
      background-image: url('@/assets/spp/u34.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .middle-center {
      width: 100%;
      height: 22%;
      margin-top: 10px;
      background-image: url('@/assets/spp/u34.png');
      background-size: cover;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .middle-bottom {
      width: 100%;
      height: 32%;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      .middle-bottom-item {
        background-image: url('@/assets/spp/u34.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        flex: 1;
        height: 100%;
      }
      .first {
        margin-right: 10px;
      }
    }
  }
  .content-right {
    width: 27%;
    height: auto;
  }
}
</style>

HdChart
